The Hydrogen Cookbook offers step-by-step recipes for adding new features to your project. Each recipe includes adaptable code samples, detailed instructions, and best practices to speed up development.

> Note:
> Recipes are based on the [default Hydrogen project template](https://github.com/Shopify/hydrogen/tree/main/templates/skeleton). The required code changes might look different for your own project.


## Recipes

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/headless/hydrogen/cookbook/bundles" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/coin"
     data-alt-src="/assets/resource-cards/coin-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Bundles
    </h3>
    <p class="resource-card__description">Add support for bundles on product pages and in the cart.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/headless/hydrogen/cookbook/combined-listings" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Combined listings
    </h3>
    <p class="resource-card__description">Display combined listings on product pages and in search results.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/headless/hydrogen/cookbook/markets" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/globe"
     data-alt-src="/assets/resource-cards/globe-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Markets
    </h3>
    <p class="resource-card__description">Add support for localized shopping experiences.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/headless/hydrogen/cookbook/subscriptions" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/storefront"
     data-alt-src="/assets/resource-cards/storefront-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Subscriptions
    </h3>
    <p class="resource-card__description">Display selling plans for subscription-based products.</p>
  </a>
</div>
</div>